<template>
  <div>
    <h2>视频压缩器</h2>
    <input type="file" accept="video/*" @change="onFileChange" />
    <button @click="compressVideo">压缩视频</button>
    <video v-if="compressedUrl != null" controls :src="compressedUrl"></video>
  </div>
</template>

<script>
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

export default {
  name: "Test",
  data() {
    return {
      ffmpeg: null,
      selectedFile: null,
      compressedUrl: null,
    };
  },
  mounted() {
    this.ffmpeg = createFFmpeg({ log: true });
  },
  methods: {
    async onFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async compressVideo() {
      if (!this.selectedFile) return;

      // 加载 FFmpeg
      await this.ffmpeg.load();

      // 将文件写入 FFmpeg 文件系统
      this.ffmpeg.FS(
        "writeFile",
        "input.mp4",
        await fetchFile(this.selectedFile)
      );

      // 压缩视频，设置压缩参数
      await this.ffmpeg.run(
        "-i",
        "input.mp4",
        "-vcodec",
        "libx264",
        "-crf",
        "28",
        "output.mp4"
      );

      // 从 FFmpeg 文件系统中读取压缩后的视频文件
      const data = this.ffmpeg.FS("readFile", "output.mp4");

      // 创建压缩视频的 URL
      const blob = new Blob([data.buffer], { type: "video/mp4" });
      this.compressedUrl = URL.createObjectURL(blob);
    },
  },
};
</script>

<style scoped>
/* 可以添加一些样式 */
</style>
